<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1153991_odnr74jnwbm.css">
    <style>
        html,body {
            height: 100%;
        }
        header {
           position: relative;
           min-height: 600px;
           background: #000 url("http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/header-bg.jpg") center center no-repeat;
           background-size: cover;
        }
        .navbar {
            padding: 50px 0 0 0;
            line-height: 1;
        }
        .logo {
            float: left;
            color: #f7ba3e;
            font-size: 32px;
        }  
        .nav {
            float: right;
            font-size: 28px;
        }
        .nav > li {
            float: left;
            color: #fff;
        }
        header .nav a {
            display: block;
            padding: 5px;
            color: #fff;
            font-size: 16px;
            border-radius: 4px;
        }
        header .nav a:hover {
            background: #f7ba3e;
        }
        .intro {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
            text-align: center;
        }
        .intro h1 {
            font-size: 32px;
        }
        .intro h2 {
            font-size: 20px;
            margin-top: 20px;
        }
        .intro .button {
            margin-top: 20px;
        }
        .button {
            display: inline-block;
            font-size: 18px;
            color: #fff;
            background-color: #f7ba3e;
            padding: 10px 30px;
            border-radius: 4px;
        }
        .button:hover {
            opacity: 0.8;
        }
        section {
            text-align: center;
            margin-top: 30px;
        }
        section > h2 {
            font-size: 40px;  
            margin-top: 100px;
        }
        section > p {
            margin-top: 10px;
        }
        .services > ul > li {
            position: relative;
            float: left;
            width: 33.33%;
            padding: 10px 20px;
        }
        section > ul > li > h3 {
            margin-top: 30px;
        }
        section > ul > li > p {
            margin-top: 30px;
        }
        section > ul {
            margin-top: 40px;
        }
        section {
            margin-top: 40px;
        }
        .iconfont {
            font-size: 60px;
            background: #f7ba3e;
            color: #fff;
            border-radius: 50%;
            padding: 20px;
        }
        .family {
            margin-top: 60px;
            margin-left: 10px;
        }
        .family > figure {
            width: 320px;
            margin-right: 10px;
            margin-top: 10px;
            float: left;
        }
        .family > figure > a > img {
            width: 313px;
            height: auto;
        }
        .timeLine > li:nth-child(odd) img {
            float: right;
        }
        .timeLine > li:nth-child(even) img {
            float: left;
        }
        .timeLine > li:nth-child(odd) {
            padding-right: calc(50% - 50px);
            text-align: right;
        }
        section .timeLine > li:nth-child(even) {
            padding-left: calc(50% - 50px);
            text-align: left;
        }
        .timeLine > li:nth-child(even) dl {
            margin-left: 120px;
        }
        .timeLine > li:nth-child(odd) dl {
            margin-right: 120px;
        }
       .timeLine > li {
            margin-top: 100px;
            position: relative;
        }
        .timeLine > li::after {
            content: '';
            display: block;
            clear: both;
        }
        .timeLine img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px lightblue solid;
        }
        .timeLine > li > dl > dt {
            font-size: 16px;
            font-weight: bold;
        }
        .timeLine > li > dl > dd:nth-of-type(1) {
           color: #666;
        }
        .timeLine > li::before {
            content: '';
            position: absolute;
            top: 90%;
            left: 50%; 
            display: inline-block;
            height: 140px;
            width: 3px;
            background: lightblue;
        }
        .timeLine > :last-child::before {
            height: 0;
            width: 0;
        }
        .timeLine > li::before {
            content: '';
            position: absolute;
            top: 90%;
            left: 50%; 
            display: inline-block;
            height: 140px;
            width: 3px;
            background: lightblue;
        }
    </style>
</head>
<body>
    <header>
        <div class="navbar layout clearfix">
            <a class="logo" href="#">Start Project</a>
            <ul class="nav">
                <li><a href="">Services</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Team</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
        <div class="intro layout">
            <h1>Welcome To Our Studio!</h1>
            <h2>IT'S NICE TO MEET YOU</h2>
            <a class="button" href="">tell me more</a>
        </div>
    </header>
    <main class="layout">
        <section class="services">
           <h2>SERVICES</h2>
           <p>Lorem ipsum dolor sit amet consectetur</p>
           <ul class="clearfix ">
               <li>
                   <span class="iconfont icon-suo"></span>
                   <h3>E-Commerce</h3>
                   <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   </p>
               </li>
               <li>
                    <span class="iconfont icon-gouwuche"></span>
                    <h3>Responsive Design</h3>
                    <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </p>
                </li>
                <li>
                    <span class="iconfont icon-bijiben"></span>
                    <h3>Web Security</h3>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    </p>
                </li>
           </ul>
        </section>

     
        <section class="services">
             <h2>PORTFOLIO</h2>
             <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
             <div class="family clearfix">
                <figure>
                    <a href="#">
                        <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                    </a>
                    <h2>Round Icons</h2>
                    <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

                <figure>
                        <a href="#">
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/portfolio/roundicons.png" alt="">
                        </a>
                        <h2>Round Icons</h2>
                        <p>raphic Design</p>
                </figure>

             </div>
            
        </section>
   
        <section>
            <h2>About</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
            <ul class="timeLine">
                    <li>
                        <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg" alt="">
                        <dl>
                            <dt>2009-2011</h2>
                            <dd>Our Humble Beginnings</dd>
                            <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nobis ratione, accusamus sint quas ut, quo velit amet delectus veritatis, totam repellendus harum eos atque quod aliquam vero ab nam?</dd> 
                        </dl>
                    </li>
                    <li>
                        <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg" alt="">
                        <dl>
                            <dt>2009-2011</h2>
                            <dd>Our Humble Beginnings</dd>
                            <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nobis ratione, accusamus sint quas ut, quo velit amet delectus veritatis, totam repellendus harum eos atque quod aliquam vero ab nam?</dd> 
                        </dl>
                    </li>
                    <li>
                            <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg" alt="">
                            <dl>
                                <dt>2009-2011</h2>
                                <dd>Our Humble Beginnings</dd>
                                <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nobis ratione, accusamus sint quas ut, quo velit amet delectus veritatis, totam repellendus harum eos atque quod aliquam vero ab nam?</dd> 
                            </dl>
                   </li>              
                   <li>
                        <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg" alt="">
                        <dl>
                            <dt>2009-2011</h2>
                            <dd>Our Humble Beginnings</dd>
                            <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nobis ratione, accusamus sint quas ut, quo velit amet delectus veritatis, totam repellendus harum eos atque quod aliquam vero ab nam?</dd> 
                        </dl>
                    </li>                
                
            </ul>
        </section>
        <section>
            
        </section>
    </main>
    <footer>
       
    </footer>
</body>
</html>